﻿<link href="~/Themes/GoMarket/Content/css/slideShowImpress.css" rel="stylesheet" />
<noscript>
	<style>
	.step {
		width: 100%;
		position: relative;
	}
	.step:not(.active) {
		opacity: 1;
		filter: alpha(opacity=99);
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
	}
	.step:not(.active) a.jms-link{
		opacity: 1;
		margin-top: 40px;
	}
	</style>
</noscript>

<!-- jmpress plugin -->
<script type="text/javascript" src="/Themes/GoMarket/Content/js/jmpress.min.js"></script>
<!-- jmslideshow plugin : extends the jmpress plugin -->
<script type="text/javascript" src="/Themes/GoMarket/Content/js/jquery.jmslideshow.js"></script>

<div class="container">
    <section id="jms-slideshow" class="jms-slideshow">
        <div class="step" data-color="color-2">
            <div class="jms-content">
                <h3>Just when I thought...</h3>
                <p>From fairest creatures we desire increase, that thereby beauty's rose might never die</p>
                <a class="jms-link" href="#">Read more</a>
            </div>
            <img src="/Themes/GoMarket/Content/img/8-category_default.jpg" />
        </div>
        <div class="step" data-color="color-3" data-y="900" data-rotate-x="80">
            <div class="jms-content">
                <h3>Holy cannoli!</h3>
                <p>But as the riper should by time decease, his tender heir might bear his memory</p>
                <a class="jms-link" href="#">Read more</a>
            </div>
            <img src="/Themes/GoMarket/Content/img/9-category_default.jpg" />
        </div>
        <div class="step" data-color="color-4" data-x="-100" data-z="1500" data-rotate="170">
            <div class="jms-content">
                <h3>No time to waste</h3>
                <p>Within thine own bud buriest thy content and, tender churl, makest waste in niggarding</p>
                <a class="jms-link" href="#">Read more</a>
            </div>
            <img src="/Themes/GoMarket/Content/img/10-category_default.jpg" />
        </div>
        <div class="step" data-color="color-5" data-x="3000">
            <div class="jms-content">
                <h3>Supercool!</h3>
                <p>Making a famine where abundance lies, thyself thy foe, to thy sweet self too cruel</p>
                <a class="jms-link" href="#">Read more</a>
            </div>
            <img src="/Themes/GoMarket/Content/img/6-category_default.jpg" />
        </div>
    </section>
</div>

<script type="text/javascript">
	$(function() {
	    var jmpressOpts = { animation: { transitionDuration: '0.8s' } };
		$('#jms-slideshow').jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
			autoplay	: true,
			bgColorSpeed: '0.8s',
			arrows		: false
		}));
	});
</script>